<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{padding: 0;margin: 0;}
        ul{list-style-type: none}
        .title{
            height: 29px;
            width: 790px;
            border: 1px solid #ccc;
        }
        .title ul li{
            width: 100px;
            float: left;
            background: #ccc;
            text-align: center;
            height: 29px;
            line-height: 29px;
            margin-left: 20px;
            cursor: pointer;
        }
        .big{
            width:790px;
            margin: auto;
        }
        .box{
            width: 785px;
            height: 188px;
            position: relative;
            overflow: hidden;
        }
        .box .list {
            width: 3200px;
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
        }
        .box .list li{
            float: left;
            height: 188px;
            width: 185px;
            padding: 0 5px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
        .box .list li a{
            width: 185px;
            background: #5b5b5b;
            display: block;
            color: #fff;
            font-size: 13px;
            text-decoration: none;
        }
        .big .title ul .color{
            background: #2fa3ff;
        }
    </style>
</head>
<body>
<div class="big">
    <div class="title">
        <ul>
            <li>耐克</li>
            <li>阿迪达斯</li>
            <li>李宁</li>
            <li>安踏</li>
        </ul>
    </div>

    <div class="box">

        <ul class="list">
            <li><img src="img/20120217.jpg" alt=""><a href="#">耐克</a></li>
            <li><img src="img/20120218.jpg" alt=""><a href="#">耐克</a></li>
            <li><img src="img/20120219.png" alt=""><a href="#">耐克</a></li>
            <li><img src="img/20120220.png" alt=""><a href="#">耐克</a></li>
            <li><img src="img/20120217.jpg" alt=""><a href="#">阿迪达斯</a></li>
            <li><img src="img/20120218.jpg" alt=""><a href="#">阿迪达斯</a></li>
            <li><img src="img/20120219.png" alt=""><a href="#">阿迪达斯</a></li>
            <li><img src="img/20120220.png" alt=""><a href="#">阿迪达斯</a></li>
            <li><img src="img/20120217.jpg" alt=""><a href="#">李宁</a></li>
            <li><img src="img/20120218.jpg" alt=""><a href="#">李宁</a></li>
            <li><img src="img/20120219.png" alt=""><a href="#">李宁</a></li>
            <li><img src="img/20120220.png" alt=""><a href="#">李宁</a></li>
            <li><img src="img/20120217.jpg" alt=""><a href="#">安踏</a></li>
            <li><img src="img/20120218.jpg" alt=""><a href="#">安踏</a></li>
            <li><img src="img/20120219.png" alt=""><a href="#">安踏</a></li>
            <li><img src="img/20120220.png" alt=""><a href="#">安踏</a></li>
        </ul>
    </div>

</div>

</body>
</html>
<script src="js/jquery-1.10.1.js"></script>
<script>
    $(function(){
//        给所有全局变量一个命名
        var _index=0;
//        给上面四个盒子一个点击事件
        $(".big .title ul li").click(function(){

//            让四个li的坐标都等于他们的下标
            _index= $(".big .title ul li").index(this);

//            alert(_index)
//            给每一个点击事件加一个类名.让他同级元素的上下级移除添加的类名
            $(this).addClass("color").siblings().removeClass("color");
//            声明liwidth变量还
            var liwidth=$(".box .list li").outerWidth();
//            alert(_index);
//            list下面li的宽度包括内.外边距以及边框乘以4 获取当前可见4个li的宽度
            liwidth=liwidth*4;
//            给他添加一个动画效果
            $(".list").stop(true).animate({
                left: -liwidth * _index
            },1000)
        })
    });
</script>